<template lang="">
  <div>
    <input type="text" v-model="message" @keydown.enter="add()">
    <button @click="add()">提交</button>
    <ul>
      <li v-for="(item, index) in arr" :key="index">
      {{item.message}} {{item.time}}
      <button @click="edit(index)">修改</button>
      <button @click="del(index)">删除</button>
      </li>
    </ul>
    <hr>
    <div v-show="change">
      <input type="text" v-model="temporary" >
      <button @click="confirm()">确定</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "",
      arr: [],
      change: false,
      temporary: "",
      i: 0
    }
  },
  methods: {
    add() {

      let now = new Date()
      let obj = {
        message: this.message,
        time: now.toLocaleString()
      }
      this.arr.push(obj)
      this.message = ""
    },
    del(index) {
      if (this.change) {
        this.change = false
      }
      this.arr.splice(index, 1)

    },
    edit(index) {
      this.change = true
      this.i = index
      this.temporary = this.arr[index].message
    },
    confirm() {
      this.arr[this.i].message = this.temporary
      this.change = false
    }
  },
}
</script>

<style lang="css">
* {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}
</style>